import { setHeight, setWeigth, setFontSize } from '@/utils/setSize'
export const theme = {
  padding: 'auto',
  margin: setWeigth(16),
  size: 1,
  color: '#1783FF',
  category10: ['#1783FF', '#00C9C9', '#F0884D', '#D580FF', '#7863FF', '#60C42D', '#BD8F24', '#FF80CA', '#2491B3', '#17C76F'],
  category20: [
    '#1783FF',
    '#00C9C9',
    '#F0884D',
    '#D580FF',
    '#7863FF',
    '#60C42D',
    '#BD8F24',
    '#FF80CA',
    '#2491B3',
    '#17C76F',
    '#AABA01',
    '#BC7CFC',
    '#237CBC',
    '#2DE379',
    '#CE8032',
    '#FF7AF4',
    '#545FD3',
    '#AFE410',
    '#D8C608',
    '#FFA1E0',
  ],
  enter: { duration: 300, fill: 'both', delay: 0 },
  update: { duration: 300, fill: 'both', delay: 0 },
  exit: { duration: 300, fill: 'both', delay: 0 },
  view: { viewFill: 'transparent', plotFill: 'transparent', mainFill: 'transparent', contentFill: 'transparent' },
  line: { line: { fill: '', strokeOpacity: 1, lineWidth: 1, lineCap: 'round' } },
  point: {
    point: { r: 3, fillOpacity: 0.95, lineWidth: 0 },
    hollow: { r: 3, strokeOpacity: 0.95, lineWidth: 1 },
    plus: { r: 3, strokeOpacity: 0.95, lineWidth: 3 },
    diamond: { r: 3, strokeOpacity: 0.95, lineWidth: 1 },
  },
  interval: { rect: { fillOpacity: 0.95, }, hollow: { fill: '', strokeOpacity: 1, lineWidth: 2 } },
  area: { area: { fillOpacity: 0.85, lineWidth: 0, } },
  polygon: { polygon: { fillOpacity: 0.95 } },
  cell: { cell: { fillOpacity: 0.95 }, hollow: { fill: '', strokeOpacity: 1, lineWidth: 2 } },
  rect: { rect: { fillOpacity: 0.95, }, hollow: { fill: '', strokeOpacity: 1, lineWidth: 2 } },
  link: { link: { fill: '', strokeOpacity: 1 } },
  vector: { vector: { fillOpacity: 1 } },
  box: { box: { fillOpacity: 0.95, stroke: '#fff', lineWidth: 1 } },
  text: {
    text: {
      fill: '#1D2129',
      fontSize: setFontSize(16),
      strokeWidth: 0,
      connectorStroke: '#416180',
      connectorStrokeOpacity: 0.45,
      connectorLineWidth: 1,
      backgroundFill: '#416180',
      backgroundFillOpacity: 0.15,
      backgroundPadding: [2, 4],
      startMarkerSymbol: 'circle',
      startMarkerSize: 4,
      endMarkerSymbol: 'circle',
      endMarkerSize: 4,
    },
    badge: {
      fill: '#1D2129',
      fillOpacity: 0.65,
      strokeWidth: 0,
      fontSize: 10,
      textAlign: 'center',
      textBaseline: 'middle',
      markerFill: '#416180',
      markerFillOpacity: 0.25,
      markerStrokeOpacity: 0,
    },
  },
  lineX: { line: { stroke: '#416180', strokeOpacity: 0.45, lineWidth: 1 } },
  lineY: { line: { stroke: '#416180', strokeOpacity: 0.45, lineWidth: 1 } },
  rangeX: { range: { fill: '#416180', fillOpacity: 0.15, lineWidth: 0 } },
  rangeY: { range: { fill: '#416180', fillOpacity: 0.15, lineWidth: 0 } },
  connector: {
    connector: {
      stroke: '#416180',
      strokeOpacity: 0.45,
      lineWidth: 1,
      connectLength1: 12,
      endMarker: true,
      endMarkerSize: 6,
      endMarkerFill: '#416180',
      endMarkerFillOpacity: 0.95,
    },
  },
  axis: {
    arrow: false,
    gridLineDash: [3, 4],
    gridLineWidth: 0.5,
    gridStroke: '#fff',
    gridStrokeOpacity: 0.25,
    labelAlign: 'horizontal',
    labelFill: '#fff',
    labelOpacity: 0.45,
    labelFontSize: setFontSize(16),
    labelFontWeight: 'normal',
    labelSpacing: 8,
    line: false,
    lineLineWidth: 0.5,
    lineStroke: '#fff',
    lineStrokeOpacity: 0.45,
    tickLength: 4,
    tickLineWidth: 1,
    tickStroke: '#fff',
    tickOpacity: 0.45,
    titleFill: '#fff',
    titleOpacity: 0.9,
    titleFontSize: setFontSize(16),
    titleFontWeight: 'normal',
    titleSpacing: 12,
    titleTransformOrigin: 'center',
    lineArrowOffset: 6,
    lineArrowSize: 6,
  },
  axisTop: {
    gridDirection: 'positive',
    labelDirection: 'negative',
    tickDirection: 'negative',
    titlePosition: 'top',
    titleSpacing: 12,
    labelSpacing: 4,
    titleTextBaseline: 'middle',
  },
  axisBottom: {
    gridDirection: 'negative',
    labelDirection: 'positive',
    tickDirection: 'positive',
    titlePosition: 'bottom',
    titleSpacing: 12,
    labelSpacing: 4,
    titleTextBaseline: 'bottom',
  },
  axisLeft: {
    gridDirection: 'positive',
    labelDirection: 'negative',
    labelSpacing: 4,
    tickDirection: 'negative',
    titlePosition: 'left',
    titleSpacing: 12,
    titleTextBaseline: 'middle',
    titleDirection: 'vertical',
    titleTransformOrigin: 'center',
  },
  axisRight: {
    gridDirection: 'negative',
    labelDirection: 'positive',
    labelSpacing: 4,
    tickDirection: 'positive',
    titlePosition: 'right',
    titleSpacing: 12,
    titleTextBaseline: 'top',
    titleDirection: 'vertical',
    titleTransformOrigin: 'center',
  },
  axisLinear: { girdClosed: true, gridConnect: 'arc', gridDirection: 'negative', gridType: 'surround', titlePosition: 'top', titleSpacing: 0 },
  axisArc: { title: false, titlePosition: 'inner', line: false, tick: true, labelSpacing: 4 },
  axisRadar: { girdClosed: true, gridStrokeOpacity: 0.3, gridType: 'surround', label: false, tick: false, titlePosition: 'start' },
  legendCategory: {
    backgroundFill: 'transparent',
    itemBackgroundFill: 'transparent',
    itemLabelFill: '#fff',
    itemLabelFillOpacity: 0.9,
    itemLabelFontSize: setFontSize(16),
    itemLabelFontWeight: 'normal',
    itemMarkerFillOpacity: 1,
    itemMarkerSize: 8,
    itemSpacing: [8, 8],
    itemValueFill: '#fff',
    itemValueFillOpacity: 0.65,
    itemValueFontSize: setFontSize(16),
    itemValueFontWeight: 'normal',
    navButtonFill: '#fff',
    navButtonFillOpacity: 0.65,
    navPageNumFill: '#fff',
    navPageNumFillOpacity: 0.45,
    navPageNumFontSize: setFontSize(16),
    padding: 8,
    title: false,
    titleFill: '#fff',
    titleFillOpacity: 0.65,
    titleFontSize: setFontSize(16),
    titleFontWeight: 'normal',
    titleSpacing: 4,
    tickStroke: '#fff',
    tickStrokeOpacity: 0.25,
    rowPadding: 8,
    colPadding: 12,
    maxRows: 3,
    maxCols: 3,
  },
  legendContinuous: {
    handleHeight: 12,
    handleLabelFill: '#fff',
    handleLabelFillOpacity: 0.45,
    handleLabelFontSize: 12,
    handleLabelFontWeight: 'normal',
    handleMarkerFill: '#fff',
    handleMarkerFillOpacity: 0.6,
    handleMarkerLineWidth: 1,
    handleMarkerStroke: '#fff',
    handleMarkerStrokeOpacity: 0.25,
    handleWidth: 10,
    labelFill: '#fff',
    labelFillOpacity: 0.45,
    labelFontSize: setFontSize(16),
    labelFontWeight: 'normal',
    labelSpacing: 3,
    tick: true,
    tickLength: 12,
    ribbonSize: 12,
    ribbonFill: '#aaa',
    handle: true,
    handleLabel: false,
    handleShape: 'slider',
    handleIconSize: 6.666666666666666,
    indicator: false,
    titleFontSize: setFontSize(16),
    titleSpacing: 4,
    titleFontWeight: 'normal',
    titleFillOpacity: 0.9,
    tickStroke: '#fff',
    tickStrokeOpacity: 0.45,
  },
  label: {
    fill: '#fff',
    fillOpacity: 0.65,
    fontSize: setFontSize(16),
    fontWeight: 'normal',
    offset: 12,
    connectorStroke: '#fff',
    connectorStrokeOpacity: 0.45,
    connectorLineWidth: 1,
    connectorLength: 12,
    connectorLength2: 8,
    connectorDistance: 4,
  },
  innerLabel: { fill: '#fff', fontSize: setFontSize(16), fillOpacity: 0.85, fontWeight: 'normal', offset: 0 },
  htmlLabel: { fontSize: setFontSize(16), opacity: 0.65, color: '#fff', fontWeight: 'normal' },
  slider: {
    trackSize: setFontSize(16),
    trackFill: '#416180',
    trackFillOpacity: 1,
    selectionFill: '#1783FF',
    selectionFillOpacity: 0.15,
    handleIconSize: 10,
    handleIconFill: '#f7f7f7',
    handleIconFillOpacity: 1,
    handleIconStroke: '#fff',
    handleIconStrokeOpacity: 0.25,
    handleIconLineWidth: 1,
    handleIconRadius: 2,
    handleLabelFill: '#fff',
    handleLabelFillOpacity: 0.45,
    handleLabelFontSize: setFontSize(16),
    handleLabelFontWeight: 'normal',
  },
  scrollbar: {
    padding: [0, 0, 0, 0],
    trackSize: 6,
    isRound: true,
    slidable: true,
    scrollable: true,
    trackFill: '#e5e5e5',
    trackFillOpacity: 0,
    thumbFill: '#000',
    thumbFillOpacity: 0.15,
    thumbHighlightedFillOpacity: 0.2,
  },
  title: {
    spacing: 8,
    titleFill: '#fff',
    titleFillOpacity: 0.9,
    titleFontSize: setFontSize(16),
    titleFontWeight: 'bold',
    titleTextBaseline: 'top',
    subtitleFill: '#fff',
    subtitleFillOpacity: 0.65,
    subtitleFontSize: setFontSize(16),
    subtitleFontWeight: 'normal',
    subtitleTextBaseline: 'top',
  },
  tooltip: {
    crosshairsStroke: '#fff',
    crosshairsLineWidth: setWeigth(1),
    crosshairsStrokeOpacity: 0.25,
    fontSize: setFontSize(18),
    css: {
      '.g2-tooltip': { background: '#f7f7f7', opacity: 0.95, fontSize: setFontSize(18) },
      '.g2-tooltip-title': { color: '#A6A6A6', fontSize: setFontSize(18) },
      '.g2-tooltip-list-item-name-label': { color: '#A6A6A6', fontSize: setFontSize(18) },
      '.g2-tooltip-list-item-value': { color: '#A6A6A6', fontSize: setFontSize(18) },
    },
    textStyle: {
      fontSize: setFontSize(18),
    }
  },
};
